<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>亲爱的小铭铭，圣诞快乐呦！</title>
</head>
<style>
    @import url(https://fonts.googleapis.com/css?family=Raleway:100,400);
    @import url(https://fonts.googleapis.com/css?family=Lato:100,400);
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    overflow: hidden;
}

html{
    display:none;
    opacity:0;
    transition:opacity 1s ease;
}

#projectContainer {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
}

#projectContainer * {
    -o-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -webkit-transition: all .7s ease;
    -ms-transition: all .7s ease;
    transition: all .7s ease;
}

.message {
    -o-transition: transform .7s, left 2s ease, block 0s;
    -moz-transition: transform .7s, left 2s ease, block 0s;
    -webkit-transition: transform .7s, left 2s, block 0s;
    -ms-transition: transform .7s, left 2s, block 0s;
    transition: transform .7s, left 2s, block 0s;
    color: #333;
    padding-top: 8vh;
    padding-bottom: 8vh;
    /*padding-left:1vw;
    padding-right:1vw;*/
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow:hidden;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
}

.messageContent{
    width:100%;
    height:100%;
    background-color:transparent;
    position:relative;
    z-index:10000;
    overflow:auto;
}

* {
    font-family: 'Raleway', sans-serif;
    /*font-family: 'Lato', sans-serif;*/
    font-weight: 100;
    color: #fff;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-font-smoothing: subpixel-antialiased;
}


/*specific message styles*/

.superTextContainer {
    position: absolute;
    top: 50%;
    -o-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    width: 100%;
    /*padding-right:2vw;*/
    -o-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.textContainer {
    margin: auto;
    display: auto;
    color: #333;
    text-align: center;
    font-size: 10vh;
}

#messageOneBow {
    /*width:90%;*/
    width: 10vh;
    height: 5vh;
    margin: auto;
    max-height: 50px;
    background: #FF2F30;
    margin-top: 5vh;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

#messageOneBow div {
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    width: 0vh;
}

#messageOneBow div:nth-child(1) {
    margin: auto;
    /*width: 10vh;*/
    height: 10vh;
    background-color: #FF2F30;
    max-width: 10vh;
    box-shadow: 0px 0px 20px #333;
    box-shadow: 0px 0px 2vh #333;
    -o-transform: rotate(45deg) translate(-18%, -18%);
    -moz-transform: rotate(45deg) translate(-18%, -18%);
    -webkit-transform: rotate(45deg) translate(-18%, -18%);
    -ms-transform: rotate(45deg) translate(-18%, -18%);
    transform: rotate(45deg) translate(-18%, -18%);
}

#messageOneBow div:nth-child(2) {
    margin: auto;
    /*width: 8vh;*/
    height: 8vh;
    background-color: #FF2F30;
    box-shadow: 0px 0px 20px #333;
    box-shadow: 0px 0px 2vh #333;
    position: absolute;
    left: 50%;
    -o-transform: translate(-50%, -145%);
    -moz-transform: translate(-50%, -145%);
    -webkit-transform: translate(-50%, -145%);
    -ms-transform: translate(-50%, -145%);
    transform: translate(-50%, -145%);
}

#scrollButtonDown {
    color: #333;
    font-size: 3vh;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-weight: 400;
    opacity: 0;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    line-height: 3vh;
    padding-bottom: 1vh;
}

#scrollButtonUp {
    color: #333;
    font-size: 3vh;
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    font-weight: 400;
    opacity: 0;
    display: none;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    line-height: 3vh;
    padding-top: 1vh;
    z-index: 100000000;
}

[data-zoom] {
    -o-transform: scale(.8);
    -moz-transform: scale(.8);
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
}

#audioControls{
    position:fixed;
    bottom:0;
    left:0;
    color:#333;
    cursor:default;
    width:32px;
    height:32px;
    padding-bottom:4px;
    padding-left:4px;
    background-repeat:no-repeat;
    background-position:-99999px -99999px;
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
}

[audioPlaying]{
    background-position:center center !important;
}

[audioPaused]{
    background-position:center center !important;
}

#hiddenImages{
    background-image: url(), url();
    display:none;
}

.snowFlakes{
    position:fixed;
    z-index:10000;
    z-index:-1;
}

.snowflakeYContainer{
    -webkit-animation:snowflakeY 60s infinite linear;
    -ms-animation:snowflakeY 60s infinite linear;
    -moz-animation:snowflakeY 60s infinite linear;
    -o-animation:snowflakeY 60s infinite linear;
    animation:snowflakeY 60s infinite linear;
    height:1000vh;
    width:100vw;
    position:absolute;
    /*top:-1092vh;*/
    top:-892vh;
    -o-transition:left 5s linear !important;
    -moz-transition:left 5s linear !important;
    -webkit-transition:left 5s linear !important;
    -ms-transition:left 5s linear !important;
    transition:left 5s linear !important;
}

@-ms-keyframes snowflakeY{
    0%{
        top:-992vh;
    }
    100%{
        top:-92vh;
    }
}

@-webkit-keyframes snowflakeY{
    0%{
        top:-992vh;
    }
    100%{
        top:-92vh;
    }
}

@-moz-keyframes snowflakeY{
    0%{
        top:-992vh;
    }
    100%{
        top:-92vh;
    }
}

@-o-keyframes snowflakeY{
    0%{
        top:-992vh;
    }
    100%{
        top:-92vh;
    }
}

@keyframes snowflakeY{
    0%{
        top:-892vh;
    }
    100%{
        top:-92vh;
    }
}

.snowflake{
    border-radius:50%;
    border:1px solid #333;
    position:absolute;
}</style>
<script>
    window.addEventListener('load', function() {
        var startx, starty;
        //获得角度
        function getAngle(angx, angy) {
            return Math.atan2(angy, angx) * 180 / Math.PI;
        };

        //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
        function getDirection(startx, starty, endx, endy) {
            var angx = endx - startx;
            var angy = endy - starty;
            var result = 0;

            //如果滑动距离太短
            if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
                return result;
            }

            var angle = getAngle(angx, angy);
            if (angle >= -135 && angle <= -45) {
                result = 1;
            } else if (angle > 45 && angle < 135) {
                result = 2;
            } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
                result = 3;
            } else if (angle >= -45 && angle <= 45) {
                result = 4;
            }

            return result;
        }
        //手指接触屏幕
        document.addEventListener("touchstart", function(e){
            startx = e.touches[0].pageX;
            starty = e.touches[0].pageY;
        }, false);
        //手指离开屏幕
        document.addEventListener("touchend", function(e) {
            var endx, endy;
            endx = e.changedTouches[0].pageX;
            endy = e.changedTouches[0].pageY;
            var direction = getDirection(startx, starty, endx, endy);
            switch (direction) {
                case 1:
                    steps.nextStep(steps.currentStep.elem);
                    break;
                case 2:
                    steps.previousStep(steps.currentStep.elem);
                    break;
                default:
            }
        }, false);

        var superContainer = document.documentElement;
        var scrollIndicatorTransitionTime = 1000; //based on transition time of the scroll indicator labels
        document.addEventListener('click',function (){
            steps.nextStep(steps.currentStep.elem);
            console.log(123)
        })


        createSnowFlakes();
        function createSnowFlakes(){
            var xLimit = Math.floor(window.innerWidth/100)*10;
            var yLimit = Math.floor(window.innerHeight/20)*10;
            var snowflakeContainers = document.getElementsByClassName('snowFlakes');
            var snowflakeContainers = document.getElementsByClassName('snowFlakes');
            for(var i = 0; i < snowflakeContainers.length; i++){
                snowflakeContainers[i].children[0].innerHTML = '';
            }
            for(var i = 0; i < snowflakeContainers.length; i++){
                var currentContainer = snowflakeContainers[i];
                var currentYContainer = snowflakeContainers[i].getElementsByClassName('snowflakeYContainer')[0];
                for(var k = 0; k < yLimit; k++){
                    //y snow flakes
                    var snowflake = document.createElement('div');
                    snowflake.className = 'snowflake';
                    var dimensions = getRandomDimensions();
                    snowflake.style.width = dimensions;
                    snowflake.style.height = dimensions;
                    snowflake.style.top = getRandomYPosition();
                    snowflake.style.left = getRandomXPosition();
                    currentYContainer.appendChild(snowflake);
                }
            }
            function getRandomDimensions(){
                return Math.floor(Math.random()*(6 - 2 +1))+2+'px';
            }
            function getRandomYPosition(){
                return Math.floor(Math.random()*10*window.innerHeight)+'px';
            }
            function getRandomXPosition(){
                return Math.floor(Math.random()*window.innerWidth)+'px';
            }
        }
        window.setInterval(function(){
            var snowflakeYContainers = document.getElementsByClassName('snowflakeYContainer');
            var randomYContainer = snowflakeYContainers[Math.floor(Math.random()*snowflakeYContainers.length)];
            randomYContainer.style.left = Math.floor(Math.random()*30)+'vw';
        },500);

        //load background audio (got rid of in the end)
        //Google Source: https://drive.google.com/uc?export=download&id=0By6dnJL49jq5bm5Wdlg3dkd6a0U
        //OneDrive Source: https://onedrive.live.com/download?resid=C20DCB16FD6A5AD7!14808&authkey=!AKAieQ_rmjmhzNs&ithint=file%2cmp3
        var backgroundAudio = new Audio("");
        var controls = document.getElementById('audioControls')
        var audioLoaded = false;
        backgroundAudio.oncanplaythrough = function() {
            audioLoaded = true;
            backgroundAudio.play();
            controls.setAttribute('audioPlaying','');
        };
        backgroundAudio.onended = function() {
            this.currentTime = 0;
            this.play();
        };
        window.setTimeout(function(){
            if(!audioLoaded){
                backgroundAudio = null;
                controls.style.display = 'none';
                console.error("Loading of audio is taking longer than 10 seconds; cancel loading");
            }
        },10000);

        //add pause audio handler
        document.getElementById('audioControls').click = function(){
            if(backgroundAudio){
                if(backgroundAudio.paused){
                    backgroundAudio.play();
                    controls.removeAttribute('audioPaused')
                    controls.setAttribute('audioPlaying','');
                }else{
                    backgroundAudio.pause();
                    controls.removeAttribute('audioPlaying');
                    controls.setAttribute('audioPaused','');
                }
            }
        };

        //hide all messages except messageOne
        var messages = document.getElementsByClassName('message');
        messages[0].setAttribute('data-x-pos', '0vw');
        for (var i = 1; i < messages.length; i++) {
            messages[i].style.display = 'none';
            messages[i].setAttribute('data-x-pos', i * 100 + 'vw');
            messages[i].style.left = i * 100 + 'vw';
        }
        //create the snow flakes for each message
        for(var i = 0; i < messages.length; i++){
            var snowflakeContainer = document.createElement('div');
            snowflakeContainer.className = 'snowFlakes';
            //var snowflakeXContainer = document.createElement('div');
            //snowflakeXContainer.className = 'snowflakeXContainer';
            var snowflakeYContainer = document.createElement('div');
            snowflakeYContainer.className = 'snowflakeYContainer';
            //snowflakeContainer.appendChild(snowflakeXContainer);
            snowflakeContainer.appendChild(snowflakeYContainer);
            messages[i].appendChild(snowflakeContainer);
        }
        //create snow flakes
        createSnowFlakes();

        //show the content after it is loaded
        superContainer.style.display = 'block';
        window.setTimeout(function(){
            superContainer.style.opacity = '1';
        },0);

        //animate the opening bow
        window.setTimeout(function(){
            document.getElementById('messageOneBow').style.width = '90%';
            var bowDivs = document.getElementById('messageOneBow').getElementsByTagName('div');
            bowDivs[0].style.width = '10vh';
            bowDivs[1].style.width = '8vh';
        },0);

        var scrollStatus = {
            wheeling: false,
            functionCall: false,
            swappingMessages: false
        };

        var steps = {
            nextStep: function(elem) {
                //move to the next message if there is another step
                if (messages[this.currentStep.index + 1]) {
                    scrollStatus.swappingMessages = true;
                    elem.setAttribute('data-zoom', '');
                    this.currentStep.index++; //increment the index
                    this.currentStep.elem = messages[this.currentStep.index];
                    var currentIndex = this.currentStep.index;
                    var previousStep = messages[this.currentStep.index - 1];
                    var currentStep = this.currentStep.elem;
                    currentStep.style.display = 'block';
                    window.setTimeout(function() {
                        //alert(currentStep.style.left)
                        window.setTimeout(function() {
                            currentStep.style.left = '0vw';
                        }, 20);
                        //currentStep.style.left = '0vw';
                        //hide/show the scroll indicators
                        if (currentIndex > 0) {
                            //not at beginning message
                            scrollIndicators.visibility(true, 'up');
                        } else {
                            scrollIndicators.visibility(false, 'up')
                        }
                        if (currentIndex + 1 < messages.length) {
                            //hasn't reached the last message
                            scrollIndicators.visibility(true, 'down');
                        } else {
                            scrollIndicators.visibility(false, 'down');
                        }
                    }, 0);
                    currentStep.setAttribute('data-zoom', '');
                    window.setTimeout(function() {
                        //zoom in the next message
                        currentStep.removeAttribute('data-zoom');
                        window.setTimeout(function() {
                            //hide the previous message and reset its position
                            previousStep.removeAttribute('data-zoom');
                            previousStep.style.display = 'none';
                            window.setTimeout(function() {
                                scrollStatus.swappingMessages = false;
                            }, 700);
                            //previousStep.style.left = previousStep.getAttribute('data-x-pos');
                        }, 300);
                    }, 0);
                }
            },
            previousStep: function(elem) {
                //show previous step if you are not at the beginning
                if (messages[this.currentStep.index - 1]) {
                    scrollStatus.swappingMessages = true;
                    window.setTimeout(function() {
                        elem.setAttribute('data-zoom', ''); //zoom out current element
                    }, 0);
                    this.currentStep.index--; //decrement the index
                    this.currentStep.elem = messages[this.currentStep.index]; //get target to move to
                    var currentIndex = this.currentStep.index; //get the index of element we're navigating too
                    var previousStep = messages[this.currentStep.index + 1]; //element we're navigating away from
                    var currentStep = this.currentStep.elem; //element we're navigating too
                    currentStep.style.display = 'block';
                    window.setTimeout(function() {
                        window.setTimeout(function() {
                            previousStep.style.left = previousStep.getAttribute('data-x-pos');
                        }, 20);
                        //alert(previousStep.getAttribute('data-x-pos'));
                        //hide/show the scroll indicators
                        if (currentIndex > 0) {
                            //not at beginning message
                            scrollIndicators.visibility(true, 'up');
                        } else {
                            scrollIndicators.visibility(false, 'up')
                        }
                        if (currentIndex + 1 < messages.length) {
                            //hasn't reached the last message
                            scrollIndicators.visibility(true, 'down');
                        } else {
                            scrollIndicators.visibility(false, 'down');
                        }
                        window.setTimeout(function() {
                            currentStep.setAttribute('data-zoom', '');
                        }, 0);
                        window.setTimeout(function() {
                            //zoom in to the target message
                            window.setTimeout(function() {
                                currentStep.removeAttribute('data-zoom');
                            }, 0);
                            window.setTimeout(function() {
                                //hide the message that we're navigating away from
                                window.setTimeout(function() {
                                    previousStep.removeAttribute('data-zoom');
                                }, 0);
                                window.setTimeout(function() {
                                    previousStep.style.display = 'none';
                                }, 0);
                                window.setTimeout(function() {
                                    scrollStatus.swappingMessages = false;
                                }, 700);
                                //previousStep.style.left = previousStep.getAttribute('data-x-pos');
                            }, 700);
                        }, 300);
                    }, 0);
                }
            },
            currentStep: {
                elem: messages[0],
                index: 0
            },
            allSteps: document.getElementsByClassName('message')
        };

        var scrollIndicators = {
            visibility: function(visible, which) {
                if (visible) {
                    //show
                    switch (which) {
                        case "all":
                            //show all scroll indicators
                            var scrollIndicatorElem = document.getElementsByClassName('scrollIndicator');
                            for (var i = 0; i < scrollIndicatorElem.length; i++) {
                                scrollIndicatorElem[i].style.display = 'block';
                                window.setTimeout(function() {
                                    scrollIndicatorElem[i].style.opacity = '1';
                                }, scrollIndicatorTransitionTime);
                            }
                            break;
                        case 'up':
                            //show up scroll indicator
                            var scrollIndicatorElem = document.getElementsByClassName('scrollIndicator');
                            scrollIndicatorElem[0].style.display = 'block';
                            window.setTimeout(function() {
                                scrollIndicatorElem[0].style.opacity = '1';
                            }, scrollIndicatorTransitionTime);
                            break;
                        case 'down':
                            //show down scroll indicator
                            var scrollIndicatorElem = document.getElementsByClassName('scrollIndicator');
                            scrollIndicatorElem[1].style.display = 'block';
                            window.setTimeout(function() {
                                scrollIndicatorElem[1].style.opacity = '1';
                            }, scrollIndicatorTransitionTime);
                            break;
                        default:
                            console.error("'which' for scrollIndicator visibility() function not defined");
                            break;
                    }
                } else {
                    //hide
                    switch (which) {
                        case "all":
                            //hide all scroll indicators
                            var scrollIndicatorElem = document.getElementsByClassName('scrollIndicator');
                            for (var i = 0; i < scrollIndicatorElem.length; i++) {
                                scrollIndicatorElem[i].style.opacity = '0';
                                window.setTimeout(function() {
                                    scrollIndicatorElem[i].style.display = 'none';
                                }, scrollIndicatorTransitionTime);
                            }
                            break;
                        case 'up':
                            //hide up scroll indicator
                            var scrollIndicatorElem = document.getElementsByClassName('scrollIndicator');
                            scrollIndicatorElem[0].style.opacity = '0';
                            window.setTimeout(function() {
                                scrollIndicatorElem[0].style.display = 'none';
                            }, scrollIndicatorTransitionTime);
                            break;
                        case 'down':
                            //hide down scroll indicator
                            var scrollIndicatorElem = document.getElementsByClassName('scrollIndicator');
                            scrollIndicatorElem[1].style.opacity = '0';
                            window.setTimeout(function() {
                                scrollIndicatorElem[1].style.display = 'none';
                            }, scrollIndicatorTransitionTime);
                            break;
                        default:
                            console.error("'which' for scrollIndicator visibility() function not defined");
                            break;
                    }
                }
            }
        };

        //show scroll down indicator (after object with function is defined)
        scrollIndicators.visibility(true, 'down');
            window.addEventListener('wheel', function(e) {

            scrollStatus.wheeling = true;
            if (!scrollStatus.functionCall) {
                parseScroll(e);
                scrollStatus.functionCall = true;
            }
            scrollStatus.wheeling = false;
            scrollStatus.functionCall = false;
        });

        function parseScroll(e) {
            if (e.deltaY > 0) {
                //move to next message
                if (!scrollStatus.swappingMessages) {
                    steps.nextStep(steps.currentStep.elem);
                }
            }
            if (e.deltaY < 0) {
                //move to previous message
                if (!scrollStatus.swappingMessages) {
                    steps.previousStep(steps.currentStep.elem);
                }
            }
        }

        var resizeTimeout = false;
        window.addEventListener('resize',function(){
            //add debouncing for efficiency
            window.clearTimeout(resizeTimeout);
            resizeTimeout = window.setTimeout(function(){
                createSnowFlakes();
            },100);
        });
        window.addEventListener('scroll',function(e){
            console.log('scrolled');
            e.preventDefault();
            return false;
        });
    });
</script>
<body>
<div id="projectContainer">
    <div id="scrollButtonUp" class="scrollIndicator">
        <span style="font-size:4vh; color:#333; line-height:4vh;">⇑</span>
        <br> Scroll Up
    </div>
    <div id="projectContainer">
        <div id="messageOne" class="message" style="display:block;">
            <div class="messageContent">
                <div class="superTextContainer">
                    <div class="textContainer">
                        亲爱的金铭女士
                    </div>
                    <div id="messageOneBow">
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="messageTwo" class="message">
            <div class="superTextContainer">
                <div class="textContainer" style="font-size:5vh;">
                    非常幸运！<br>
                    您能参与进我的生活！
                </div>
            </div>
        </div>
        <div id="messageThree" class="message">
            <div class="superTextContainer">
                <div class="textContainer" style="font-size:5vh; padding-left:2vw; padding-right:2vw;">
                    您<br>
                    点点滴滴的改变<br>
                    我<br>
                    默默地看在眼里<br><br>
                    温暖在心中！
                </div>
            </div>
        </div>
        <div id="messageFour" class="message">
            <div class="superTextContainer">
                <div class="textContainer" style="font-size:6vh; padding-left:2vw; padding-right:2vw;">
                    心在一起<br>
                    爱就不会有距离！
                </div>
            </div>
        </div>
        <div id="messageFive" class="message">
            <div class="superTextContainer">
                <div class="textContainer" style="font-size:6vh; padding-left:2vw; padding-right:2vw;">
                    未来的日子里<br>
                    还是要多多关照呀！
                </div>
            </div>
        </div>
        <div id="messageSix" class="message">
            <div class="superTextContainer">
                <div class="textContainer" style="color:#ff0000; font-weight:400;">
                    Merry Christmas!
                </div>
            </div>
        </div>
        <div id="messageSeven" class="message">
            <div class="superTextContainer">
                <div class="textContainer" style="font-size:50vh; line-height:50vh;">
                    <img src="http://img.huijia21.com/blog/1608803010786.png" style="-o-transform:translate(0%,-25%);-moz-transform:translate(0%,-25%);-webkit-transform:translate(0%,-25%);-ms-transform:translate(0%,-25%);transform:translate(0%,-25%);" >
                    <div style="font-size:4vh;color:#333; font-weight:400; line-height:4vh !important;">
                        爱你的旗旗！
                    </div>
                </div>
            </div>
        </div>
        <div id="scrollButtonDown" class="scrollIndicator">
            Scroll Down
            <br><span style="font-size:4vh; color:#333; line-height:4vh;">⇓</span>
        </div>
        <div id="audioControls">
        </div>
    </div>
    <div id="hiddenImages">
        <img audioPaused src="">
        <img audioPlaying src="">
    </div>
</body>
</html>